<template>
  <div id="dictionary">
    <el-container>
      <el-header class="main-head">
        <el-row type="flex" justify="end">
          <el-input v-model="example.name" class="query-medium" placeholder="字典类型名称(模糊查询)" clearable />
          <el-input v-model="example.code" class="query-medium" placeholder="字典类型编码" clearable />
          <el-select v-if="$store.state.buttons['admin/dict/save']" v-model="example.status" class="query-short" placeholder="状态" clearable>
            <el-option value="A" label="启用" />
            <el-option value="I" label="禁用" />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="queryList(1)"> 查询 </el-button>
          <el-button type="success" icon="el-icon-plus" @click="add()"> 添加字典类型 </el-button>
        </el-row>
      </el-header>
      <el-main class="app-main">
        <el-table :data="result.rows" :height="$store.state.sizes.pTableHei" :row-class-name="rowClass" row-key="key"
          border :tree-props="{children: 'children'}">
          <el-table-column prop="name" label="字典名称" min-width="180" fixed="left" />
          <el-table-column prop="code" label="字典编码" min-width="180" />
          <el-table-column prop="desc" label="字典说明" min-width="300" />
          <el-table-column label="状态" min-width="120">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag v-if="scope.row.status=='A'" size="medium">
                  启用
                </el-tag>
                <el-tag v-else size="medium" type="danger">
                  禁用
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="$store.state.buttons['admin/dict/update']" size="mini" type="primary" @click="modify(scope.row)">
                修改
              </el-button>
              <el-button v-if="$store.state.buttons['admin/dict/delete']" size="mini" type="danger" @click="delate(scope.row)">
                删除
              </el-button>
              <el-button v-if="$store.state.buttons['admin/dict/save'] && scope.row.parent == null" size="mini" type="success"
                @click="add(scope.row)">
                添加字典
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="example.page" :page-sizes="[10, 20, 50, 100]" :page-size="example.size" layout="total, sizes, prev, pager, next, jumper"
          :total="result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-main>
    </el-container>

    <el-dialog title="修改类型/字典" :visible.sync="flag.modify" :close-on-click-modal="false" top="15vh" width="40%" @keydown.enter.native="confirm()">
      <el-form ref="update" class="full-item-form" label-width="100px" :rules="rules" :model="param">
        <el-form-item label="字典编号" prop="code">
          <el-input v-model="param.code" :disabled="!flag.add" />
        </el-form-item>
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="param.name" />
        </el-form-item>
        <el-form-item label="字典说明">
          <el-input v-model="param.desc" />
        </el-form-item>
        <el-form-item label="字典状态" prop="status">
          <el-select v-model="param.status" placeholder="请选择">
            <el-option value="A" label="启用">
              启用
            </el-option>
            <el-option value="I" label="禁用">
              禁用
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="flag.modify = false"> 取 消（Esc） </el-button>
        <el-button type="primary" @click="confirm"> 确 定（Enter） </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop
  } from 'vue-property-decorator'

  @Component
  export default class Dictionary extends Vue {
    urls = {
      list: 'admin/dict/list',
      save: 'admin/dict/save',
      update: 'admin/dict/update',
      del: 'admin/dict/delete'
    };

    rules = {
      code: [{
        required: true,
        message: '请输入字典编号',
        trigger: 'blur'
      }],
      name: [{
        required: true,
        message: '请输入字典名称',
        trigger: 'blur'
      }],
      status: [{
        required: true,
        message: '请选择字典状态',
        trigger: 'blur'
      }]
    };
    example = {
      page: 1,
      size: 10
    };

    param = {};
    result = {
      rows: [],
      total: 0
    };

    flag = {
      add: false,
      modify: false
    }

    handleSizeChange(val) {
      this.example.size = val
      this.queryList()
    }

    handleCurrentChange(val) {
      this.example.page = val
      this.queryList()
    }

    queryList(page) {
      const that = this
      if (page != null) {
        this.example.page = page
      }
      this.$get(this.urls.list, that.example).then(function(response) {
        if (response) {
          that.result = response
        } else {
          that.result = {
            rows: [],
            total: 0
          }
        }
      })
    }

    rowClass(data) {
      if (data.row.parent == null) {
        return ''
      }
      return 'child-row'
    }

    modify(row) {
      if (this.$refs.update != null) {
        this.$refs.update.clearValidate()
      }
      this.flag.add = false
      this.param = JSON.parse(JSON.stringify(row))
      this.flag.modify = true
    }

    add(row) {
      if (this.$refs.update != null) {
        this.$refs.update.clearValidate()
      }
      this.flag.add = true
      this.param = {
        status: 'A'
      }
      if (row != null) {
        this.param.parent = row.code
      }
      this.flag.modify = true
    }

    delate(row) {
      const that = this
      this.$confirm('确定要字典权限‘' + row.name + '’吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post(this.urls.del, row).then(function(response) {
          if (response) {
            that.queryList()
          }
        })
      }).catch(() => {
        showMessage('info', '已取消删除')
      })
    }

    confirm() {
      const that = this
      this.$refs.update.validate((valid) => {
        if (valid) {
          let url = that.urls.update
          if (that.flag.add) {
            url = that.urls.save
          }
          const param = JSON.parse(JSON.stringify(that.param))
          delete param.children;
          that.$post(url, param).then(function(response) {
            if (response) {
              that.queryList()
              that.flag.modify = false
            }
          })
        } else {
          return false
        }
      })
    }

    created() {
      this.queryList()
      this.$store.commit('getActionPers', 'dictionary')
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
  #dictionary {
    padding: 20px 20px 0px 20px;
  }

  .child-row {
    background: #f0f9eb !important;
  }
</style>
